<template>
    <el-container class="bodys">
        <el-card class="login-card">
            <el-row :gutter="0">
                <el-col :span="12" style="text-align:center">
                    <el-button 
                        :class="{login_method:loginMethodFlag,login_head:true}" 
                        type="text" 
                        @click="loginMethodFlag=(!loginMethodFlag)">
                        密码登录
                    </el-button>
                </el-col>
                <el-col :span="12" style="text-align:center">
                    <el-button 
                        :class="{login_method:!loginMethodFlag,login_head:true}" 
                        type="text" 
                        @click="loginMethodFlag=(!loginMethodFlag)">
                        短信验证登录
                    </el-button>
                </el-col>
            </el-row>
            <el-form v-show="loginMethodFlag" ref="loginFormPW" :model="loginFormPW" :rules="loginFormPWRules"
            label-width="80px">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="loginFormPW.phone" placeholder="请输入手机号"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginFormPW.password" placeholder="请输入密码"/>
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="15">
                        <el-form-item label="验证码" prop="code">
                            <el-input v-model="loginFormPW.code" placeholder="请输入验证码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <img :src="codeUrl" @click="getCode()"/>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" size="small" @click="loginPW">登 录</el-button>
                    <el-button type="primary" size="small" @click="resetloginFormPW">取 消</el-button>
                </el-form-item>
                <el-form-item>
                    <span style="color:#999;">还没有账户？  </span>
                    <el-button type="text" @click="$router.push({path:'/register'})">去注册</el-button>
                </el-form-item>
            </el-form>
            <el-form v-show="!loginMethodFlag" ref="loginFormSMS" :model="loginFormSMS" :rules="loginFormSMSRules"
            label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="15">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="loginFormSMS.phone" placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" 
                            size="small" 
                            @click="showImageCode" 
                            :disabled="getSmsCodeFlag">
                            {{ buttonText }}
                        </el-button>
                    </el-col>   
                </el-row>
                <el-form-item label="验证码" prop="smsCode">
                    <el-input v-model="loginFormSMS.smsCode" placeholder="请输入短信验证码"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="loginSMS">登 录</el-button>
                    <el-button type="primary" size="small" @click="resetloginFormSMS">取 消</el-button>
                </el-form-item>
                <el-form-item>
                    <span style="color:#999;">还没有账户？  </span>
                    <el-button type="text" @click="$router.push({path:'/register'})">去注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-dialog
            title="请输入图片验证码"
            :visible.sync="showCodeFlag"
            :close-on-click-modal="false"
            width="400px"
            :center="true">
            <el-form 
                :rules="{code:[{required:true,message:'请输入图片验证码'}]}" 
                :model="imageCode" 
                ref="imageCode"
                label-width="30%">
                <el-row :gutter="10">
                    <el-col :span="15">
                        <el-form-item label="验证码" prop="code">
                            <el-input v-model="imageCode.code" placeholder="请输入图片验证码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <img :src="imageCode.codeUrl" @click="getCode2"/>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getSmsCode">确定</el-button>
                    <el-button type="primary" size="small" @click="cancleGetSmsCode">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</template>

<script>
    import { getCode, login, loginSms ,checkCode} from "../api/user"
    export default {
        name:'login',
        data() {
            return {
                getSmsCodeFlag: false, // 按钮禁用状态
                buttonText: '点击获取验证码', // 按钮文本
                imageCode:{
                    uuid:'',
                    code:'',
                    codeUrl:'',//图片验证码的Base64编码
                },
                countdown: 60 ,// 倒计时时长（秒）
                showCodeFlag:false,
                loginMethodFlag:true,
                codeUrl:'',//图片验证码的Base64编码
                loginFormPW:{
                    phone:'',
                    password:'',
                    uuid:'',
                    code:'',
                },
                loginFormSMS:{
                    phone:'',
                    smsCode:'',
                },
                loginFormPWRules:{
                    phone:[{required:true,message:'请输入手机号'}],
                    password:[{required:true,message:'请输入密码'}],
                    code:[{required:true,message:'请输入验证码'}],
                },
                loginFormSMSRules:{
                    phone:[{required:true,message:'请输入手机号'}],
                    smsCode:[{required:true,message:'请输入验证码'}],
                }
            }
        },
        watch:{
            loginMethodFlag(){
                this.$refs.loginFormSMS.resetFields()
                this.$refs.loginFormPW.resetFields()
            },
        },
        methods: {
            showImageCode(){
                this.$refs.loginFormSMS.validateField("phone",error=>{
                    if(error){
                        this.$message.warning("请先输入手机号")
                    }else{
                        this.showCodeFlag = true
                    }
                })
            },
            async getCode2(){
                const {data:{uuid,codeUrl}} = await getCode()
                this.imageCode.uuid = uuid
                this.imageCode.codeUrl = codeUrl
            },
            getSmsCode() {
                // 点击按钮后执行的操作
                this.$refs.imageCode.validate(async valid =>{
                    if(valid){
                        await checkCode(this.imageCode.uuid,this.imageCode.code,this.loginFormSMS.phone).then(resp=>{
                            if(resp.code==200){
                                this.startCountdown(); // 启动倒计时
                                this.$message.success("发送成功")
                            }else{
                                this.$message.error(resp.message)
                            }
                        })
                    }
                })
                this.showCodeFlag = false
            },
            startCountdown() {
                this.getSmsCodeFlag = true; //禁用按钮
                let timer = setInterval(() => {
                    if (this.countdown > 0) {
                        this.buttonText = this.countdown--;
                    } else {
                        this.getSmsCodeFlag = false; // 倒计时结束，启用按钮
                        this.buttonText = '点击获取验证码'; // 恢复按钮文本
                        clearInterval(timer);
                    }
                }, 1000);
            },
            cancleGetSmsCode(){
                this.$refs.imageCode.resetFields();
                this.showCodeFlag = false
                this.imageCode.uuid = ''
                this.getCode()
            },
            async getCode(){
                const {data:{uuid,codeUrl}} = await getCode()
                this.loginFormPW.uuid = uuid
                this.codeUrl = codeUrl
            },
            loginPW(){
                this.$refs.loginFormPW.validate(async valid =>{
                    if(valid){
                        const { code, message, data } = await login(this.loginFormPW)
                        if(code === 200){
                            sessionStorage.setItem('token',data.token)
                            this.resetloginFormPW()
                            this.$router.push('/')
                        }else{
                            this.getCode()
                            this.$message.error(message)
                        }
                    }else{
                        return false
                    }
                })
            },
            resetloginFormPW(){
                this.$refs.loginFormPW.resetFields();
                this.loginFormPW.uuid = ''
                this.getCode()
            }, 
            loginSMS(){
                this.$refs.loginFormSMS.validate(async valid =>{
                    if(valid){
                        const { code, message, data } = await loginSms(this.loginFormSMS)
                        if(code === 200){
                            sessionStorage.setItem('token',data.token)
                            this.resetloginFormSMS()
                            this.$router.push('/')
                        }else{
                            this.getCode2()
                            this.$message.error(message)
                        }
                    }else{
                        return false
                    }
                })
            },
            resetloginFormSMS(){
                this.$refs.loginFormSMS.resetFields();
                this.loginFormSMS.uuid = ''
                this.getCode()
            }, 
        },
        mounted() {
            this.getCode()
            this.getCode2()
        },
    }
</script>

<style scoped>
    .el-container{
        width: 100vw;
        height: 100vh;
        /* background-color: red; */
        background: url('../assets/bg1.jpeg') no-repeat;
        background-size: 100vw 100vh;
        background-attachment: fixed;
        /* display: flex;
        justify-content:center;
        align-items:center; */
    }
    .login-card {
        width: 400px;
        /* height: 260px; */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.7);
        padding: 20px;
    }
    .login_head{
        text-align:center;
        color:black;
        font-size: 20px;
        font-weight: 600;
    }
    .login_method{
        color: #409eff;
    }
</style>